<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基于meiziui的仿微信pc端</title>
    <link rel="stylesheet" href="/backstage/lib/chat/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/backstage/lib/chat/css/main.css?v=1.2.2"/>

    <!-- <script language="javascript" type="text/javascript" src="35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript"> -->
    <!-- hQGHuMEAyLn('.adsbygoogle,.fdad,.inner > .add');</script> -->
</head>
<body>
<div class="box" id="main">
    <audio id="msgMusic" src="/backstage/lib/chat/static/message.mp3" controls="controls" style="position: absolute;top:-100px;"></audio>

    <div class="wechat">
        <div class="sidestrip">
            <div class="am-dropdown" data-am-dropdown>

                <div class="am-dropdown-toggle">
                    <img style='width: 34px;height: 34px; margin-left: 13px;border-radius: 2px;'
                         src="{$imgPath}{$broker['avatar']}" alt="">
                </div>

                <div class="am-dropdown-content">
                    <div class="own_head_top">
                        <div class="own_head_top_text">
                            <p class="own_name">{$broker['broker_name']}<img src="" alt=""/></p>
                            <p class="own_numb">手机号：{$broker['broker_phone']}</p>
                        </div>
                        <img src="{$imgPath}{$broker['avatar']}" alt=""/>
                    </div>
                    <div class="own_head_bottom">
                        <!--<p><span>地区</span>江西 九江</p>-->
                        <div class="own_head_bottom_img">
                            <!--<a href=""><img src="/backstage/lib/chat/images/head_1.png" /></a>-->
                            <!--<a href=""><img src="/backstage/lib/chat/images/head_2.png" /></a>-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="sidestrip_icon">
                <a id="si_1" style="background: url(/backstage/lib/chat/images/icon/head_2_1.png) no-repeat;"></a>
                <a id="si_2"></a>
                <!--<a id="si_3"></a>-->
            </div>

            <div id="doc-dropdown-justify-js">
                <div class="am-dropdown" id="doc-dropdown-js" style="position: initial;">
                    <div class="sidestrip_bc am-dropdown-toggle"></div>
                    <ul class="am-dropdown-content" style="">
                        <li>
                            <a href="#"
                               data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">意见反馈</a>
                            <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
                                <div class="am-modal-dialog">
                                    <div class="am-modal-hd">Modal 标题
                                        <a href="javascript: void(0)" class="am-close am-close-spin"
                                           data-am-modal-close>&times;</a>
                                    </div>
                                    <div class="am-modal-bd">
                                        Modal 内容。本 Modal 无法通过遮罩层关闭。
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li><a href="#">备份与恢复</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="middle on">
            <div class="wx_search">
                <input type="text" placeholder="搜索"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="user_list">

                    <li v-for="(item,index) in userList" @click="toggolUser(item,$event)" :class="{'checked-user':item.hx_id==onUser.hx_id}" >
                        <div class="user_head">
                            <img :src="item.hx_avatarurlpath" style="position: absolute"/>
                            <span v-if="item.msg_num>0" style="background: #ff3b30;color:#fff;padding:1px 7px;border-radius:10px;position: relative;top:-11px;left:27px;">{{item.msg_num}}</span>
                        </div>
                        <div class="user_text">
                            <p class="user_name">{{item.hx_nickname}}</p>
                            <p class="user_message">ID： {{item.hx_id}}</p>
                        </div>
                        <div class="user_time"></div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="middle">
            <div class="wx_search">
                <input type="text" placeholder="搜索"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="friends_list">
                    <li>
                        <p>新的朋友</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="/backstage/lib/chat/images/own_head.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">新的朋友</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>公众号</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="/backstage/lib/chat/images/own_head.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">公众号</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <p>A</p>
                        <div class="friends_box">
                            <div class="user_head"><img src="/backstage/lib/chat/images/own_head.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">彭于晏丶plus</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="/backstage/lib/chat/images/own_head.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">陈依依</p>
                            </div>
                        </div>
                        <div class="friends_box">
                            <div class="user_head"><img src="/backstage/lib/chat/images/own_head.jpg"/></div>
                            <div class="friends_text">
                                <p class="user_name">毛毛</p>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>

        <div class="middle">
            <div class="wx_search">
                <input type="text" placeholder="搜索收藏内容"/>
                <button>+</button>
            </div>
            <div class="office_text">
                <ul class="icon_list">
                    <li class="icon_active">
                        <div class="icon"><img src="/backstage/lib/chat/images/icon/icon.png" alt=""/></div>
                        <span>全部收藏</span>
                    </li>

                </ul>
            </div>
        </div>

        <div class="talk_window">
            <div class="windows_top">
                <div class="windows_top_box">
                    <span>{{onUser.hx_nickname}}</span>
                    <ul class="window_icon">
                        <li><a href=""><img src="/backstage/lib/chat/images/icon/icon7.png"/></a></li>
                        <li><a href=""><img src="/backstage/lib/chat/images/icon/icon8.png"/></a></li>
                        <li><a href=""><img src="/backstage/lib/chat/images/icon/icon9.png"/></a></li>
                        <li><a href=""><img src="/backstage/lib/chat/images/icon/icon10.png"/></a></li>
                    </ul>
                    <div class="extend" class="am-btn am-btn-success"
                         data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>

                    <div id="doc-oc-demo3" class="am-offcanvas">
                        <div class="am-offcanvas-bar am-offcanvas-bar-flip">
                            <div class="am-offcanvas-content">
                                <p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="windows_body">
                <div class="office_text" id="officeText" style="height: 100%;">
                    <ul class="content" id="chatbox">

                        <!--消息列表-->
                        <div v-for="(val,i) in onMessage">


                            <li  class="me" v-if="val.attr=='me' && val.type==1">
                                <img src="{$imgPath}{$broker['avatar']}" >
                                <span v-html="val.text"></span>
                            </li>
                            <li class="me" v-if="val.attr=='me' && val.type==2">
                                <img src="{$imgPath}{$broker['avatar']}" >
                                <!--<span style="padding:2px;">-->
                                    <img onclick="showBigImg(this)" style="min-width:100px !important;margin-right:8px;height: auto !important;" :src="val.url"/>
                                <!--</span>-->
                            </li>

                            <li class="other" v-if="val.attr=='other' && val.type==1">
                                <img :src="onUser.hx_avatarurlpath" >
                                <span v-html="val.text"></span>
                            </li>

                            <li class="other" v-if="val.attr=='other' && val.type==2">
                                <img :src="onUser.hx_avatarurlpath">
                                <span>
                                    <img onclick="showBigImg(this)" style="min-width:100px !important;height: auto !important;" :src="val.url"/>
                                </span>
                            </li>
                            <li class="other" v-if="val.attr=='other' && val.type==3">
                                <img :src="onUser.hx_avatarurlpath">
                                <span>
                                    <img  style="min-width:250px !important;height: auto !important;" :src="val.house_img"/>
                                    <div>{{val.house_title}}</div>
                                    <div>{{val.house_address}}</div>
                                    <div>{{val.house_intro}}</div>
                                </span>
                            </li>

                            <li class="other" v-if="val.attr=='other' && val.type==4">
                                <img :src="onUser.hx_avatarurlpath">
                                <audio  controls style="" :src="val.url"></audio>
                            </li>

                            <li class="other" v-if="val.attr=='other' && val.type==5">
                                <img :src="onUser.hx_avatarurlpath" >
                                <span>
                                    <img src="/backstage/images/map.jpg" class='map-img'>
                                    <p class="map-addr" >{{val.addr}}</p>
                                </span>
                            </li>
                        </div>

                    </ul>
                </div>
            </div>
            <div class="windows_input" id="talkbox" v-bind:class="userIds.length>0? '' :hideChat ">
                <input type="file" name="msgImg" id='msgImg' @change="selectImg" style="display: none;" accept = "image/*">
                <div class="input_icon" >
                    <a style="position: relative" href="javascript:;" @click="showEmoji()">
                        <div class="biaoqing">
                            <div class="emojis">
                                <img v-for="n in 35" @click="selectEmoji(n,$event)" :src="emojiPath+'ee_'+n+'.png'" alt="" style="position: relative !important;top:0;left:0;transform: none;margin:5px;">
                            </div>

                            <div class='gif-img'>
                                    <img v-for="n in 9" @click="selectGif('em100'+n,$event)"  :src="emojiPath+'/gif/em100'+n+'.gif'" >
                                    <img v-for="n in 16"  @click="selectGif('em10'+n,$event)"  v-if="n>9" :src="emojiPath+'/gif/em10'+n+'.gif'" >
                            </div>


                            <div style="width:100%;height:50px;">

                            </div>
                        </div>
                        <div id="tagleIcon" style="width:100%;display:none;height:40px;width:400px;background: #eee;position: relative;bottom:45px;left:-120px;">
                            <div class="tagle-icon selected" onclick="selectedIcon(1,this)"><img :src="emojiPath+'ee_1.png'" ></div>
                            <div class="tagle-icon" onclick="selectedIcon(2,this)"><img :src="emojiPath+'/gif/icon_gif.png'" style="width:35px;" ></div>
                        </div>
                    </a>


                    <!--<a href="javascript:;"><input type="file" name="msgImg" style="opacity: 0;"></a>-->
                    <a href="javascript:;" @click="msgImg" ></a>
                    <!--<a href="javascript:;"></a>-->
                    <!--<a href="javascript:;"></a>-->
                    <!--<a href="javascript:;"></a>-->
                    <!--<a href="javascript:;"></a>-->
                </div>
                <div class="input_box">
                    <div contentEditable="true" id="input_box" onclick="$('#tagleIcon').hide();$('.biaoqing').hide()" ></div>
                    <button id="send" >发送（S）</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='/backstage/lib/chat/js/webim.config.js'></script>
<script type='text/javascript' src='/backstage/lib/chat/js/strophe-1.2.8.min.js'></script>
<!--<script type='text/javascript' src='/backstage/lib/chat/js/websdk.shim.js?v=1'></script>-->
<script src='http://downloads.easemob.com/downloads/cdn/websdk-1.4.15.js'></script>
<script src="/backstage/lib/chat/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/backstage/lib/chat/js/amazeui.min.js"></script>
<script type="text/javascript" src="/backstage/lib/chat/js/zUI.js"></script>
<script type="text/javascript" src="/backstage/lib/chat/js/wechat.js?v=2"></script>
<script type="text/javascript" src="/backstage/lib/chat/js/voice-2.0.js"></script>
<script type="text/javascript" src="/backstage/js/chat.js?v=1.8.8"></script>
<script type="text/javascript" src="/backstage/js/xadmin.js?v=1.1"></script>
<script type="text/javascript" src="/backstage/lib/layui/layui.js" ></script>

<script src="/js/vue.js"></script>

<script>

    var app = new Vue({
        el: '#main',
        data: {
            brokerInfo:{
                hx_id:'{$broker["hx_username"]}',
                hx_nickname:'{$broker["broker_name"]}',
                hx_avatarurlpath:'{$imgPath}{$broker["avatar"]}',
                hx_broker_id:parseInt('{$broker["id"]}'),
                hx_phone:'{$broker["broker_phone"]}'
            },
            userList: [],  //所有用户信息列表  二维
            userIds: [],   //所有用户id 一维
            onUser:{},     //正在聊天的用户
            onMessage:[],   //正在聊天的消息列表
            userMessage:{},   //所有用户的消息列表
            returnImg: '',     //选择的图片
            imgPath:'{$imgPath}',
            emojiPath: '/backstage/lib/chat/images/',
            chatMsg: '',
            hideChat:'hideChat'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },

            showEmoji:function(){

                if(this.userIds.length>0){
                    $('.biaoqing').show();
                    $('#tagleIcon').show()
                }

            },
            //选中emoji表情
            selectEmoji:function(n,e){
//                e.stopPropagation();
//
//                hideEmoji();

                //发送数据添加表情

                var k = Object.keys(emojis)[n-1];
                var _emoji = '<img  flag="'+k+'" style="width:20px !important;height: 20px !important;display: inline-block !important;float:none !important;" src="'+this.emojiPath+emojis[k]+'"/>';

//                this.chatMsg = this.chatMsg+_emoji;
//                this.chatMsg = this.chatMsg+k;

                //输入框显示表情

                $('#input_box').html($('#input_box').html()+_emoji);

            },


            //选中动态表情
            selectGif:function(flag,e){
                e.stopPropagation();

                sendPrivateGif(flag);
                hideEmoji();
            },

            //获取列表
            getListData: function () {

                var that = this;
                $.get('{:config("template.root_path")}/admin', that.pageData, function (res) {
                    if (res.code == 200) {

                        that.adminData = res.adminData;
                        that.pageData.page = res.pageData.page;
                        that.pageData.count = res.pageData.count;
                        that.pageData.pageSize = res.pageData.pageSize;

                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    }
                }, 'json');
            },
            //切换用户
            toggolUser:function(user,e){
                this.onUser = user;
                this.onMessage = this.userMessage[user.hx_id];

                var i = this.userIds.indexOf(user.hx_id);

                this.userList[i].msg_num = 0;


//                this.checkedUser = user.hx_id;
//                $(e.currentTarget).addClass('checked-user').siblings().removeClass('checked-user');

                chatBox();

//                console.log($(e.currentTarget));
            },


            msgImg:function(){

                if(app.onUser.hx_id){
                    $('#msgImg').click();

                }
            },

            //选中图片
            selectImg:function(){

                var imgurl = URL.createObjectURL($('#msgImg')[0].files[0]);
                layer.confirm('<img style="width:100%" src="'+imgurl+'"/>', {
                    btn: ['确定发送','取消'], //按钮
                    title:'预览图片',
                    width:'auto',
//                    maxHeight:$(window).height()*0.9,
                    skin:'layui-confirm'
                }, function(){
                    sendPrivateImg(imgurl);
                   $('#msgImg').val('');
//                   return false;
//                    var index = parent.layer.getFrameIndex(window.name);
//                    //关闭当前frame
                    layer.closeAll();
                }, function(){
                    $('#msgImg').val('');
                });
            }



        },
        watch:{
            userIds:{
                handler:function(newValue,oldValue){
                    if(newValue.length==1){
                        app.onMessage = app.userMessage[app.userIds[0]];
                        app.onUser = app.userList[0];
                    }else{
                        app.onMessage = app.userMessage[app.onUser.hx_id];

                    }

//                    console.log(app.onMessage,'onm');
                }
            }
        },
        created: function () {

        }
    })

</script>
<script>
    RongIMLib.RongIMVoice.init();
    WebIM.config.appkey = '{$hx_appkey}';
    var conn = {};
    conn = new WebIM.connection({
        isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
        https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
        url: WebIM.config.xmppURL,
        isAutoLogin: true,
        heartBeatWait: WebIM.config.heartBeatWait,
        autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
        autoReconnectInterval: WebIM.config.autoReconnectInterval,
        apiUrl: WebIM.config.apiURL
    });

    var options = {
        apiUrl: WebIM.config.apiURL,
        user: '{$broker["hx_username"]}',
        pwd: '{$broker["hx_password"]}',
        appKey: WebIM.config.appkey
    };
    conn.open(options);

    conn.listen({
        onOpened: function (message) {
            console.log('连接成功', message);//连接成功回调
            // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
            // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
            // 则无需调用conn.setPresence();
        },

        //连接关闭回调
        onClosed: function (message) {
        },

        //收到文本消息
        onTextMessage: function (message) {
            var newUser = {
                hx_avatarurlpath:message.ext.hx_avatarurlpath,
                hx_id:message.ext.hx_id,
                hx_nickname:message.ext.hx_nickname
            }



//            console.log('str',str);
             message = parseEmoji(message);
//             parseEmoji(message);


            insertUser(newUser);
            if(message.ext.house_id){
                console.log('房源链接',message);
                insertMsg(3,message);

            }else if(message.ext.em_expression_id){

                message.url = '/backstage/lib/chat/images/gif/'+message.ext.em_expression_id+'.gif';
                insertMsg(2,message);
                console.log('动态表情', message);

            }else{
                insertMsg(1,message);
                console.log('文本消息', message);
            }

//            chatBox('<li class="other"><img src="' + message.ext.hx_avatarurlpath + '"><span>' +message.data + '</span></li>');
//            chatBox();
//            console.log(app.userMessage);

        },

        //收到表情消息
        onEmojiMessage: function (message) {
            console.log('表情消息',message);
        },

        //收到图片消息
        onPictureMessage: function (message) {
            console.log('图片消息', message);
            insertUser(message.ext);
//            var userid = message.ext.hx_id;

            insertMsg(2,message);

//            chatBox();
//            chatBox('<li class="other"><img src="' + message.ext.hx_avatarurlpath + '"><span><img style="min-width:100px !important;height: auto !important;" src="'+message.url+'"/></span></li>');

        },

        //收到命令消息
        onCmdMessage: function (message) {
        },

        //收到音频消息
        onAudioMessage: function (message) {

            console.log('音频消息',message);
            insertUser(message.ext);
            insertMsg(4,message);

        },

        onLocationMessage: function (message) {
            console.log('位置消息',message);
            insertUser(message.ext);
            insertMsg(5,message);


        },//收到位置消息
        onFileMessage: function (message) {
        },    //收到文件消息
        onVideoMessage: function (message) {
            var node = document.getElementById('privateVideo');
            var option = {
                url: message.url,
                headers: {
                    'Accept': 'audio/mp4'
                },
                onFileDownloadComplete: function (response) {
                    var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
                    node.src = objectURL;
                },
                onFileDownloadError: function () {
                    console.log('File down load error.')
                }
            };
            WebIM.utils.download.call(conn, option);
        },   //收到视频消息
        onPresence: function (message) {
        },       //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
        onRoster: function (message) {
        },         //处理好友申请
        onInviteMessage: function (message) {
        },  //处理群组邀请
        onOnline: function () {
        },                  //本机网络连接成功
        onOffline: function () {
            console.log('网络已掉线');
            conn.close();
        },                 //本机网络掉线
        onError: function (message) {
            console.log('失败回调', message);
        },          //失败回调
        onBlacklistUpdate: function (list) {       //黑名单变动
            // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
            console.log(list);
        },
        onReceivedMessage: function (message) {
        },    //收到消息送达服务器回执
        onDeliveredMessage: function (message) {
        },   //收到消息送达客户端回执
        onReadMessage: function (message) {
        },        //收到消息已读回执
        onCreateGroup: function (message) {
        },        //创建群组成功回执（需调用createGroupNew）
        onMutedMessage: function (message) {
        }        //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
    });
</script>
<script type="text/javascript">


</script>
</body>
</html>
